<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>sliderbase.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
  </script>

  <script src="static/js/doc.js">
  </script>

  <meta charset="utf8">
</head>

<body onload="prettyPrint()">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">sliderbase.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    Implementation of a basic slider control.

 Models a control that allows to select a sub-range within a given
 range of values using two thumbs.  The underlying range is modeled
 as a range model, where the min thumb points to value of the
 rangemodel, and the max thumb points to value + extent of the range
 model.

 The currently selected range is exposed through methods
 getValue() and getExtent().

 The reason for modelling the basic slider state as value + extent is
 to be able to capture both, a two-thumb slider to select a range, and
 a single-thumb slider to just select a value (in the latter case, extent
 is always zero). We provide subclasses (twothumbslider.js and slider.js)
 that model those special cases of this control.

 All rendering logic is left out, so that the subclasses can define
 their own rendering. To do so, the subclasses overwrite:
 - createDom
 - decorateInternal
 - getCssClass
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="closure_goog_ui_sliderbase.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">ui/sliderbase.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_ui_SliderBase.html">
          goog.ui.SliderBase</a><br/>
        <div class="class-details">This creates a SliderBase object.</div>
 </div>
      
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>





  <h2>Global Properties</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.ui.SliderBase.ANIMATION_INTERVAL_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.SliderBase.</span><span class="entryName">ANIMATION_INTERVAL_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
     </div>


     <div class="entryOverview">
       How long the animations should take (in milliseconds).
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_sliderbase.js.source.html#line118">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.ui.SliderBase.MOUSE_DOWN_INCREMENT_INTERVAL_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.SliderBase.</span><span class="entryName">MOUSE_DOWN_INCREMENT_INTERVAL_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number">number</a></span></div>
     </div>


     <div class="entryOverview">
       When the user holds down the mouse on the slider background, the closest
thumb will move in &quot;lock-step&quot; towards the mouse. This number indicates how
long each step should take (in milliseconds).
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_sliderbase.js.source.html#line110">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>



      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory ui</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="closure/goog" current="ui/sliderbase.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
